import React from 'react'
import './style.less'

import Background from '@/components/Background/index'


import bg1 from '@/assets/images/login_bg1.jpg'
import LoadableComponent from '@/utils/loadable'

const LoginForm=LoadableComponent(import ('./loginForm'));
const RegisterForm=LoadableComponent(import ('./registerForm'));



class Login extends React.Component{

    state={
        show:'login' //默认显示login
    }
    /**
     * 切换登录和注册的面板
     */
    toggleShow = () => {
        this.setState({
            show: this.state.show === 'login' ? 'register' : 'login'
        })
    }
    render(){
        const {show} =this.state
        
        return(
            <Background url={bg1}>
                <div className="login-container">
                    <div className={`box ${show=== 'login'?'active':''}`}>
                        <LoginForm  toggleShow={this.toggleShow}/>
                    </div>
                    <div className={`box ${show=== 'register'?'active':''}`}>
                        <RegisterForm toggleShow={this.toggleShow}/>
                    </div>
                </div>
            </Background>
        )
    }
}


export default Login;